@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

@use '../../../scss/gio-layout' as gio-layout;

:host {
  @include gio-layout.gio-full-width-content-container;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 600px;

  :host-context(.breadcrumb) {
    height: calc(100% - 16px /* Remove margin-top*/);
    margin-top: 16px;

    .gio-policy-studio-layout {
      &__tab-content {
        --gv-policy-studio--h: calc(100vh - 185px - 62px - 40px);
      }
    }
  }

  :host-context(.hasApiBanner) {
    .gio-policy-studio-layout {
      &__tab-content {
        --gv-policy-studio--h: calc(100vh - 185px - 82px);
      }
    }
  }

  :host-context(.hasApiBanner.breadcrumb) {
    .gio-policy-studio-layout {
      &__tab-content {
        --gv-policy-studio--h: calc(100vh - 185px - 62px - 82px - 40px);
      }
    }
  }

  .gio-policy-studio-layout {
    &__header {
      display: flex;
      margin-bottom: 20px;

      &__nav {
        flex: 1;

        &__icon {
          margin-left: 5px;
          height: 20px;
          width: 20px;
        }
      }
    }

    &__tab-content {
      flex: 1 1 auto;
      --gv-policy-studio--h: calc(100vh - 185px);

      &__container {
        height: 100%;
      }

      &.save-bar-opened {
        --gv-policy-studio--pb: 84px;
      }
    }

    &__tab-nav-panel {
      display: contents;
    }

    &__save-bar {
      width: 50%;
      margin: 0 25%;
    }
  }
}
